<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(function () {
            //1.发送ajax请求
            list();
            //添加
            //绑定事件
            $("#Node").click(function () {

                //弹出模态框
                //jquery对象改变为dom对象,使用dom对象的方法来实现清理缓存
                //$("#saveform")[0].reset();
                $("#saveform")[0].reset();
                $("#modal").modal("show");
            })
            //绑定点击事件
            $("body").on("click","#update",function () {
                //清空缓存
                $("#saveform")[0].reset();
                //1.获取数据
                var eid=$(this).val();
                var ename=$(this).parent().parent().find("td:eq(0)").text();
                var sex=$(this).parent().parent().find("td:eq(1)").text();
                var address=$(this).parent().parent().find("td:eq(2)").text();
                var tel=$(this).parent().parent().find("td:eq(3)").text();
                var card=$(this).parent().parent().find("td:eq(4)").text();

                //数据回显
                $("#ename").val(ename);
                $("#sex").val(sex);
                $("#address").val(address);
                $("#tel").val(tel);
                $("#card").val(card);
                $("#eid").val(eid);
                //弹出模态框
                $("#modal").modal("show");
            });
            //发送请求  保存操作
             $("#savebtn").click(function () {
                $.ajax({
                    type:"post",
                    url:"/ssm_idea_war_exploded/emp/save",
                    data:$("#saveform").serialize(),
                    success:function (data) {
                        // console.debug(data);
                        //关闭模态框
                        if(data.indexOf("ok")!=-1){
                            $("#modal").modal("hide");
                            list();
                        }

                    }
                });
             });
            //1.删除操作
            //2.发送删除请求
            // var eid=$("#del").val();
            // console.debug(eid);
            //事件绑定
            $("tbody").on("click","#del",function () {
                var eid=$(this).val();
                console.debug(eid);
                $.ajax({
                    type:"post",
                    url:"/ssm_idea_war_exploded/emp/del",
                    //dataType:"json",
                    data:{"eid":eid},
                    success: function (data) {
                        if(data.indexOf("ok")!=-1){
                            list()
                        }else{
                            alert("删除失败");
                        }
                    }
                });
            })

        });
        function handleData(data) {
                $(data).each(function(i,obj){
                    var trs='<tr>'+
                        '<td>'+obj.ename+'</td>'+
                    '<td>'+obj.sex+'</td>'+
                    '<td>'+obj.address+'</td>'+
                    '<td>'+obj.tel+'</td>'+
                    '<td>'+obj.card+'</td>'+
                        '<td>'+
                        '<button id="del" value='+obj.eid+' class="btn btn-danger btn-xs">'+
                    '<span class="glyphicon glyphicon-remove-sign"></span>删除</button>'+
                    '<button id="update" value='+obj.eid+' class="btn btn-warning btn-xs">'+
                    '<span class="glyphicon glyphicon-pencil"></span>修改</button>'+
                    '</td>'+
                    '</tr>';
                    //获取tbody
                    $("tbody").append(trs);
                    console.debug(obj.eid);
                })
        }
        function list() {
            //清空
            $("tbody").empty();
            $.ajax({
                type:"post",
                url:"/ssm_idea_war_exploded/emp/list",
                dataType:"json",
                success: function (data) {
                    //console.debug("Hello World")
                    //console.debug(data);
                    handleData(data);
                }
            });
        }
    </script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style type="text/css">
        th,td{
            text-align: center;
        }
    </style>

</head>
<body>
<div class="container">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>地址</th>
                <th>电话</th>
                <th>银行卡</th>
                <th>操作 &nbsp;&nbsp;<button  id="Node"  class="btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span>添加</button> </th>
            </tr>
        </thead>
        <tbody>
<!--            <tr>-->
<!--                <td>姓名</td>-->
<!--                <td>性别</td>-->
<!--                <td>地址</td>-->
<!--                <td>电话</td>-->
<!--                <td>银行卡</td>-->
<!--                <td>-->
<!--                    <button class="btn btn-danger btn-xs">-->
<!--                        <span class="glyphicon glyphicon-remove-sign"></span>删除</button>-->
<!--                    <button class="btn btn-warning btn-xs">-->
<!--                        <span class="glyphicon glyphicon-pencil"></span>修改</button>-->
<!--                </td>-->
<!--            </tr>-->
        </tbody>
    </table>
<!-- 模态框   -->
        <div class="modal fade" tabindex="-1" role="dialog" id="modal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">保存操作</h4>
                    </div>
                    <div class="modal-body">
<!--=================================================================form表单-->
                        <form class="form-horizontal" id="saveform">
                            <div class="form-group">
                                <label for="ename" class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-10">
                                    <input name="ename" type="text" class="form-control" id="ename" placeholder="请输入姓名">
                                </div>
                            </div>
                            <input type="hidden" name="eid" id="eid">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-10">
                                    <label class="radio-inline">
                                        <input type="radio" name="sex" id="sex1" value="男" checked="true"> 男
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="sex" id="sex2" value="女"> 女
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="address" class="col-sm-2 control-label">地址</label>
                                <div class="col-sm-10">
                                    <input name="address" type="text" class="form-control" id="address" placeholder="请输入地址">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="tel" class="col-sm-2 control-label">电话号</label>
                                <div class="col-sm-10">
                                    <input name="tel" type="text" class="form-control" id="tel" placeholder="请输入电话号">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="card" class="col-sm-2 control-label">卡号</label>
                                <div class="col-sm-10">
                                    <input name="card" type="text" class="form-control" id="card" placeholder="请输入卡号">
                                </div>
                            </div>
                        </form>
<!--========================================================================-->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="savebtn">保存</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
</div>


</body>
</html>